<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8' />
  <meta name="Author" content="M Mclaughlin">
  <title>Testing Big against Number</title>
  <style>
    body,ul,form,h1,div{margin:0;padding:0;}
    body{font-family:Calibri, Arial, Sans-Serif;}
    form{width:48em;border:2px solid #c8c8c8;margin:1.6em auto;}
    h1{text-align:center;font-size:1.2em;background-color:#c8c8c8;padding:.6em 0;}
    ul{list-style-type:none;color:#555;padding:1em 1em 0 2em;}
    .input,ul{background-color:#f5f5f5;}
    .input,.output{padding:0 1em 1em 2em;}
    .output,.methods{background-color:#e1e1e1;}
    .methods{padding-bottom:1em;}
    .output{padding-bottom:2em;}
    .size{width:80%;}
    label{width:10em;color:#000;margin-left:.6em;display:inline-block;}
    span{font-size:.9em;}
    .arg,.result,.dp{width:5em;margin-right:.8em;margin-top:1.2em;}
    .dp{width:auto;}
    .code{width:60em;font-family:Courier New, Courier, monospace;font-size:.8em;margin:0 auto;}
  </style>
  <script src='../../big.js'></script>
</head>
<body>
  <form>
    <h1>Testing Big against Number</h1>
    <ul class='methods'>
      <li>
        <input type='radio' id='toExponential' name=1/>
        <label for='toExponential'>toExponential</label>
        <span>[ decimal places ]</span>
      </li>
      <li>
        <input type='radio' id='toFixed' name=1/>
        <label for='toFixed'>toFixed</label>
        <span>[ decimal places ]</span>
      </li>
      <li>
        <input type='radio' id='toPrecision' name=1/>
        <label for='toPrecision'>toPrecision</label>
        <span>[ significant digits ]</span>
      </li>
      <li>
        <input type='radio' id='round' name=1/>
        <label for='round'>round</label>
        <span>[ decimal places [ , rounding mode ] ]</span>
      </li>
      <li>
        <input type='radio' id='sqrt' name=1/>
        <label for='sqrt'>sqrt</label>
      </li>
    </ul>
    <ul id='roundings'>
      <li>
        <input type='radio' id=0 name=2/>
        <label for=0 >Round down</label>
        <span>Round towards zero. I.e. truncate, no rounding</span>
      </li>
      <li>
        <input type='radio' id=1 name=2/>
        <label for=1 >Round half up</label>
        <span>Round towards nearest neighbour. If equidistant, round up</span>
      </li>
      <li>
        <input type='radio' id=2 name=2/>
        <label for=2 >Round half even</label>
        <span>Round towards nearest neighbour. If equidistant, round towards even neighbour</span>
      </li>
      <li>
        <input type='radio' id=3 name=2/>
        <label for=3 >Round up</label>
        <span>Round away from zero.</span>
      </li>
    </ul>

    <div class='input'>
      <div class='dpDiv'>
        <label class='dp' id='dpLabel' for='dp'>Decimal places:</label>
        <input type='text' id='dp' name='dp' size=20 />
      </div>
      <label class='arg' for='input'>Input:</label>
      <input class='size' type='text' id='input' name='input' />
    </div>

    <div class='output'>
      <label class='result' for='big'>Big:</label>
      <input class='size' type='text' id='big' name='big' readonly />
      <div id='number'>
        <label class='result' for='num'>Number:</label>
        <input class='size' type='text' id='num' name='num' readonly />
      </div>
    </div>
  </form>
  <div class= 'code' id='code'></div>
  <script>
(function () {
    var i, lastFocus,
        d = document,
        $ = function (id) {return d.getElementById(id)},
        $input = $('input'),
        $dp = $('dp'),
        $dpLabel = $('dpLabel'),
        $num = $('num'),
        $big = $('big'),
        $number = $('number'),
        $roundings = $('roundings'),
        $code = $('code'),
        $inputs = d.getElementsByTagName('input');

    function round() {
        var i, rb, method, mode, includeNumber, numVal,
            bigVal, isSqrt, oldDP, noDP,
            code = '',
            dp = ( $dp.value = $dp.value.replace(/\s+/g, '') ),
            input = ($input.value = $input.value.replace(/\s+/g, ''));

        if ( noDP = !/(^0$|^[1-9]\d*$)/.test(dp) ) {
            dp = ( $dp.value = '' );
        }

        if (input) {
            for (i = 0; i < 9; i++) {
                rb = $inputs[i];
                if (rb.checked) {
                    if (i < 5) method = rb.id;
                    else mode = rb.id;
                }
            }

            $num.value = $big.value = $code.innerHTML = '';
            isSqrt = method == 'sqrt';

            if (includeNumber = method != 'round') {
                try {
                    numVal = isSqrt
                        ? Math.sqrt(input)
                        : Number(input)[method]( noDP ? undefined : +dp );
                } catch(e) {
                    numVal = e;
                }

                if (isSqrt) {
                    if (!noDP) {
                        oldDP = Big.DP;
                        try {
                            Big.DP = +dp;
                        } catch(e) {
                            Big.DP = oldDP;
                            $big.value = e;
                            return;
                        }
                    }
                    code = 'Big.DP = ' + Big.DP;
                }
                Big.RM = +mode;
                if (code) code += '<br>';
                code += 'Big.RM = ' + mode;
            }

            code += "<br><br>Big('" + input + "')." + method + "(";

            if (!isSqrt) {
                if (method == 'round') {
                    if (noDP) {
                        noDP = dp = null;
                    }
                    code += dp + ", " + mode;
                } else code += dp;
            }

            code += ')<br><br>';

            if (includeNumber) {
                if (isSqrt) {
                    code += "Math.sqrt('" + input + "')";
                } else {
                    code += "Number('" + input + "')." + method + "(";
                    if (!noDP) code += dp;
                    code += ")";
                }
            }

            try {
                bigVal = new Big(input)[method]( noDP ? undefined : +dp, +mode);
            } catch(e) {
                bigVal = e;
            }

            setTimeout(function () {
                $big.value = bigVal;
                if (includeNumber) $num.value = numVal;
                $code.innerHTML = code;
            }, 100);

            if (window.console && console.log) {
                input = new Big(input);
                console.log('\nc: ' + input.c +
                            '\ne: ' + input.e +
                            '\ns: ' + input.s);
            }
        }
        lastFocus.focus();
    }

    oldDP = Big.DP = 20;
    Big.RM = 1;

    $input.value = $dp.value = $num.value = $big.value = '';
    setTimeout(function () {$input.focus()}, 0);

    for (i = 0; i < 9; i++) {
        $inputs[i].checked = false;

        $inputs[i].onclick = function () {
            if (this.id >= 0) {
                round();
            } else {
                $dpLabel.innerHTML = this.id == 'toPrecision'
                    ? 'Significant digits:'
                    : 'Decimal places:';
                $number.style.display = this.id == 'round'
                    ? 'none'
                    : 'block';
                $roundings.style.display = 'block';
                $dp.value = $big.value = $num.value = $code.innerHTML = '';
                lastFocus.focus();
            }
        };
    }

    $input.onfocus = $dp.onfocus = function () {
        lastFocus = this;
    };

    $inputs[0].checked = $inputs[6].checked = true;

    document.onkeypress = function (e) {
        if ((e || window.event).keyCode == 13) {
            round();
            return false;
        } else $num.value = $big.value = '';
    };
})();
  </script>
</body>
</html>
